<template>
	<!-- 底部导航栏 -->
	<view class="bottom-nav">
		<view class="nav-item" v-for="item in navItems" :key="item.title" @click="navigateTo(item.page)">
			<image :src="item.icon" class="nav-icon" />
			<text class="nav-text">{{ item.title }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//底部导航栏内容
				navItems: [{
						title: '首页',
						icon: '/static/首页图片/底部导航栏图标/首页.png',
						page: '/pages/index/index' // 页面路径
					},
					{
						title: '民宿列表',
						icon: '/static/首页图片/底部导航栏图标/民宿列表.png',
						page: '/pages/hotelList/hotelList' // 页面路径
					},
					{
						title: '消息',
						icon: '/static/首页图片/底部导航栏图标/消息中心.png',
						page:'/pages/news/news'
					},
					{
						title: '我的',
						icon: '/static/首页图片/底部导航栏图标/我的.png',
						page: '/pages/index/mine' // 页面路径
					}
				],
			}
		},
		// Vue2 options here
		methods: {
			//底部导航栏跳转
			navigateTo(page) {
				uni.navigateTo({
					url: page,
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bottom-nav {
		display: flex;
		justify-content: space-around; // 平均分布底部导航项
		align-items: center; // 垂直居中
		background-color: #fff; // 背景色为白色
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); // 上方阴影效果
		padding: 10px 0; // 上下内边距
		position: fixed; // 固定定位
		bottom: 0; // 放置在底部
		left: 0;
		width: 100%; // 宽度占满屏幕
		z-index: 100; // 足够的z-index确保在顶部
	}

	.nav-item {
		display: flex;
		flex-direction: column; // 图标和文本垂直排列
		align-items: center; // 水平居中
		text-align: center; // 文本居中对齐
	}

	.nav-icon {
		width: 24px; // 图标宽度
		height: 24px; // 图标高度
		margin-bottom: 4px; // 图标与文本间隔
	}

	.nav-text {
		font-size: 12px; // 文本字体大小
		color: #333; // 文本颜色
	}
</style>